<template>
    <div class="tableHeardOption">
        <el-popover
            placement="left-start"
            width="160"
            v-model="visible">
            <p>
                <template>
                    <el-checkbox v-model="checkAll" @change="allChange">全选</el-checkbox>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox v-for="(city, index) in tableHeaderData" v-model="city.isShow" :key="index" @change="heradChange">{{city.label}}</el-checkbox>
                </template>
            </p>
            <el-button icon="el-icon-setting" class="reference" slot="reference" circle></el-button>
        </el-popover>
    </div>
</template>

<script>
export default {
    name: 'tableHeardOption',
    data() {
        return {
            visible: false,
            checkAll: true
        }
    },
    props: {
        tableHeaderData: {
            type: Array,
            default: (e) => {
                return []
            }
        }
    },
    watch: {
    },
    created() {
        this.tableHeaderData.forEach((item) => {
            if (!item.isShow) {
                this.checkAll = false
            } 
        })
    },
    mounted() {},
    methods: {
        heradChange() {
            this.checkAll = true
            this.tableHeaderData.forEach((item) => {
                if (!item.isShow) {
                    this.checkAll = false
                } 
            })
        },
        allChange() {
            this.tableHeaderData.forEach((item) => {
                item.isShow = this.checkAll
            })
        }
    }
}
</script>

<style lang="scss">
@import  '../../../style/mixin.scss';
@import "./index.scss";
</style>

